<template>
    <div class="content">
        <img class="welcome" v-if="bookList.length > 0" src="@/static/images/book/welcome.png" />
        <div class="book-list">
            <div class="book-item" v-for="item in bookList" :key="item.id">
                <book-item cancel :item="item" @refresh="refreshList" />
            </div>
        </div>
        <u-loadmore
            loadmoreText="以下为已完成预约"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
            v-if="historyList.length > 0"
        />
        <div class="history-list">
            <div class="history-item" v-for="item in historyList" :key="item.id">
                <book-item complete :item="item" />
            </div>
        </div>
        <div
            class="empty"
            v-if="bookList.length === 0 && isFinish && historyList.length === 0 && historyFinish"
        >
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无记录</p>
        </div>
        <u-loadmore
            loadmoreText="找自习 来上岸"
            fontSize="24rpx"
            color="#D5D5D5"
            lineColor="#D5D5D5"
            marginTop="20"
            line
            v-if="bookList.length > 0 || historyList.length > 0"
        />
        <div class="footer-bar">
            <u-button
                color="#5428EC"
                text="来访预约"
                :customStyle="{ width: '100%', margin: 0 }"
                @click="toBook"
            ></u-button>
        </div>
    </div>
</template>

<script>
import BookItem from './components/BookItem';
export default {
    name: 'list',
    components: {
        BookItem,
    },
    data() {
        return {
            id: null,
            bookList: [],
            historyList: [],
            isFinish: false,
            historyFinish: false,
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
    },
    onShow() {
        this.refreshList();
    },
    onPullDownRefresh() {
        this.refreshList();
    },
    methods: {
        getBookList() {
            this.$Api.study.visitor
                .list({
                    studyhallId: this.id,
                    queryType: 0,
                })
                .then(res => {
                    this.isFinish = true;
                    this.bookList = res;
                    uni.stopPullDownRefresh();
                });
        },
        getHistoryList() {
            this.$Api.study.visitor
                .list({
                    studyhallId: this.id,
                    queryType: 1,
                })
                .then(res => {
                    this.historyFinish = true;
                    this.historyList = res;
                    uni.stopPullDownRefresh();
                });
        },
        refreshList() {
            this.isFinish = false;
            this.historyFinish = false;
            this.bookList = [];
            this.historyList = [];
            this.getBookList();
            this.getHistoryList();
        },
        toBook() {
            uni.navigateTo({
                url: '/pages/book/order?id=' + this.id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx 30rpx 130rpx 30rpx;
    .welcome {
        width: 100%;
        height: 154rpx;
    }
    .book-list {
        .book-item {
            margin-top: 20rpx;
        }
    }
    .history-list {
        .history-item {
            margin-top: 20rpx;
        }
    }
    .footer-bar {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 20rpx;
        background: #fff;
        box-sizing: border-box;
    }
}
</style>
